import { Text, View } from "@tarojs/components";
import Money from "@/components/app/Money";
import ByRow from "@/components/ui/ByRow";
import ByCellGroup from "@/components/ui/ByCellGroup";

const Item = ({ source, border = true }: { source: any; border?: boolean }) => {
  const { amount, remark, itemName } = source;
  return (
    <View className={`py-2 border-line-light ${border && "border-t-1"}`}>
      <ByRow content="between" className="font-bold px-2">
        <Text>{itemName}</Text>
        <Money value={amount} />
      </ByRow>

      {remark && (
        <View className="mt-2 bg-page rounded-md p-2 text-second text-sm">
          {remark}
        </View>
      )}
    </View>
  );
};

export default ({ details }: { details: any[] }) => {
  return (
    <ByCellGroup className="mx-3">
      {details.map((item, index) => (
        <Item border={index !== 0} key={item.balanceDetailId} source={item} />
      ))}
    </ByCellGroup>
  );
};
